<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>不影响color上下文按钮文字透明实例页面</title>
  <style>
    .button {
        font-size: 16px;
        color: #fff;
        border: 0;
        border-radius: 4px;
        padding: 5px 20px;
        height: 40px;
        background: #2a80eb;
        cursor: pointer;
        position: relative;
    }

    .button.loading::before {
        content: '';
        width: 20px;
        height: 20px;
        box-sizing: border-box;
        border: 2px solid;
        border-top-color: transparent;
        border-radius: 50%;
        position: absolute;
        inset: 0;
        margin: auto;
        animation: spin 1s linear infinite;
    }

    .button.first-color.loading {
        -webkit-text-fill-color: transparent;
    }

    .button.first-line.loading::first-line {
        color: transparent;
    }

    @keyframes spin {
        from {rotate: 0deg;}
        to {rotate: 360deg;}
    }
  </style>
</head>
<body>
<h4 class="fill">-webkit-text-fill-color</h4>
<button class="button fill-color" onClick="this.classList.toggle('loading')">点击我</button>
<h4 class="fill">::first-line</h4>
<button class="button first-line" onClick="this.classList.toggle('loading')">点击我</button>
</body>
</html>